<ion-header>
    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="backHandle($event)">
                <i>取消</i>
            </button>
        </ion-buttons>
        <ion-title>
            已选择{{checkedContactsTotal}}人
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="finishImport()">
                <i>导入</i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-fab class="search" top center>
        <button ion-fab>
            <div class="search-key-wrapper">
                <input (keyup)="inputKeyUp($event)" [(ngModel)]="searchKeyword"
                       type="text" placeholder="姓名/电话">
                <i (click)="searchHandle($event)"></i>
            </div>
        </button>
    </ion-fab>

    <div id="contactWrapper" class="contact-wrapper">
        <div *ngIf="(!currentPageContact.list || currentPageContact.list.length === 0) && isLoaded" class="no-data">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
        <ion-list id="contentArea" class="container" [ngStyle]="{height:totalHeight+'px'}">

            <div class="client-item"
                 *ngFor="let item of currentPageContact.list"
                 [ngStyle]="item.style"
                 [ngClass]="{'group':item.itemType == 0}">

                <div class="client-title">
                    {{item.title}}
                </div>

                <div *ngIf="item.itemType === 1" class="vip" >
                    <ion-checkbox [(ngModel)]="item.checked" (click)="checkedChange(item)"></ion-checkbox>
                </div>
            </div>
        </ion-list>

    </div>
    <ion-fab class="contact-index">
        <button ion-fab class="contact-list-index">
            <span class="contact-list-item"
                  [ngClass]="{'current':alpha.isCurrent}"
                  *ngFor="let alpha of alphas">
                {{alpha.v}}
            </span>
        </button>
    </ion-fab>

</ion-content>
<ion-footer>
    <div class="import-footer" ion-fixed>
        <span (click)="checkAll()" class="check-all" [innerHTML]="checkTitle"></span>
    </div>
</ion-footer>
